<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>播放器</title>
	<link href="static/bootstrap/5.2.3/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="static/xgplayer/3.0.10/xgplayer.min.css">
	
    <style type="text/css">
	 a {
			font-size:20px;
		}
		.col-sm-12 a {
			white-space: nowrap;/*规定段落的文本不进行换行*/
			 overflow: hidden;/*超出隐藏*/
			 text-overflow: ellipsis;/*隐藏的字符用省略号表示  IE*/
			-moz-text-overflow: ellipsis;/*隐藏的字符用省略号表示  火狐*/
		}
		 .table tr td {
			vertical-align: middle;/*画像居中*/
			white-space: nowrap;/*规定段落的文本不进行换行*/
			overflow: hidden;/*超出隐藏*/
			text-overflow: ellipsis;/*隐藏的字符用省略号表示  IE*/
			-moz-text-overflow: ellipsis;/*隐藏的字符用省略号表示  火狐*/
		}
		
		.truncate {
		   /* width: 500px; 定义超链接的宽度 */
		  white-space: nowrap; /* 确保文本不会换行 */
		  overflow: hidden; /* 隐藏超出容器宽度的文本 */
		  text-overflow: ellipsis; /* 超出部分用省略号表示 */
		  display: block; /* 使超链接表现得像块级元素 */
		}
		
		.btn-group-xs>.btn, .btn-xs {
			padding: 1px 5px;
			font-size: 12px;
			line-height: 1.5;
			border-radius: 3px;
		}
		
			
	  li {
		display: inline;
		white-space: nowrap;
	  }
    </style>
    <script type="text/javascript">
    </script>
  </head>
  <body>
   
	
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
					
    <div id="mse"></div>
					   <!--
					   <video id="videoId" class="video-js"   height="400"  controls preload="auto" autoPlay="true" 
					   x5-playsinline="true"
						 playsinline="true"
						 webkit-playsinline="true"
						 x-webkit-airplay="true"
						 x5-video-orientation="portraint"
					   >
					   
							<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
						</video>
						-->
								
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12" style="height: 600px;overflow-y: scroll;">
			<!--
				<table  id="div1" class="nav nav-list" style="width: 200px;">
				</table>
				-->
				<ul  id="div1" class="nav nav-list">
				</ul>
			</div>
		</div>
	</div>
	
      <script src="static/jquery-3.7.1.min.js"></script> 
	  
	  
    <script src="static/xgplayer/3.0.10/xgplayer.min.js" charset="utf-8"></script>
    <script src="static/xgplayer/3.0.10/xgplayer-mp4.min.js" charset="utf-8"></script>
    <script src="static/xgplayer/3.0.10/xgplayer-hls-3.0.10.min.js" charset="utf-8"></script>
    <script src="static/xgplayer/3.0.10/xgplayer-flv.js.3.0.0-alpha.1.min.js" charset="utf-8"></script>
    <script src="static/bootstrap/5.2.3/bootstrap.bundle.min.js"></script>
    <script type="text/javascript">
	  var globalList=[]
	  var domain = window.location.host;
		  var port = location.port; 
		  var winUrl = window.location.href
		  winUrl="http://"+domain
		  
		  	
			/***  ***/
			
			function treeToList(tree,path){
				//console.log("treeToList.path",path)
				var list=[]
				for (var i = 0; i < tree.length; i++) { 
					const fileInfo=tree[i];
					//console.log("treeToList.i",i)
					//console.log("treeToList.fileInfo",fileInfo)
					if(fileInfo.type == 0){
						//console.log("treeToList.type=0")
						var tmp=treeToList(fileInfo.childs,path+'/'+fileInfo.name)
						list=list.concat(tmp)
					}else{
						if(!fileInfo.name.endsWith('.jpg')){
							list.push({
								'path': path,
								'name': fileInfo.name,
								'url': winUrl+fileInfo.url
							})
						}
					}
				}
				return list
			}
			
			function videoChangeUrl1(ind){
			//video/mp4
			//application/x-mpegURL
				const tmp=globalList[ind]
				console.log('videoChangeUrl.tmp',tmp)
				$("#videoId source").attr('src',tmp.url)
				$("#videoId")[0].load()
				$("#videoId")[0].play()
			}
			function videoChangeUrl(ind){
			//video/mp4
			//application/x-mpegURL
		
				const tmp=globalList[ind]
				console.log('videoChangeUrl.tmp',tmp)
				//$("#mse video").attr('src',tmp.url)
				
				//window.sksxgPlayer.destroy()
				//window.sksxgPlayer=newXgPlayer(tmp.url)
				
				  if (!window.sksxgPlayer.hasStart) {
					window.sksxgPlayer.start(tmp.url);
				  } else {
					window.sksxgPlayer.src=tmp.url
				  }
				  window.sksxgPlayer.controls.autoHide=true
			}
			
			function copyUrl(ind){
				const tmp=globalList[ind]
				console.log('copyUrl.tmp',tmp)
				var $temp = $("<textarea>");
				$("body").append($temp);
				$temp.val(tmp.url).select();
				document.execCommand("copy");
				$temp.remove();
			}
			
			function newXgPlayer(vurl){
				return	new window.Player({
				  id: 'mse',
				  isLive: false,
				  playsinline: true,
				   autoplay: true,
				  url: vurl,
				  autoplay: true,
				  height: 400,
				  width: window.innerWidth-600,//window.innerWidth,
				  plugins: [window.Mp4Plugin,window.FlvJsPlugin,
				  window.HlsPlayer],	  
				  mp4plugin: {
					maxBufferLength: 50,
					minBufferLength: 10,
				  },
				  controls: {
					autoHide: true
				  }
			  });
			}
			
	var url="http://192.168.3.84:8888/aa.flv"
	//url='http://192.168.3.84:8888/cc.rmvb'
	//url='http://192.168.3.84:8888/aa/01.mp4'
	//url='http://192.168.3.84:8888/ucvideo/VideoData/17179520281144169.m3u8'
			 window.sksxgPlayer = newXgPlayer(url)
			 
			 
			 $.ajax({url:"/api/json",success:function(result){
				globalList=treeToList(result,'')
				console.log("list",globalList)
				var element=document.getElementById("div1");
				const plist=[]
				for (i = 0; i < globalList.length; i++) { 
					const fileInfo=globalList[i];
					//console.log("fileInfo3b",fileInfo)//&nbsp;&nbsp;&nbsp;
					var t='<li><a href="javascript:videoChangeUrl('+i+')">'+fileInfo.path+"/"+fileInfo.name+'</a></li>'; 
					 t='<tr><td><a href="javascript:videoChangeUrl('+i+')" style="width: '+(window.innerWidth-50)+'px;" class="truncate">'+fileInfo.path+"/"+fileInfo.name+'</a></td></tr>'; 
					 t='<li><a href="javascript:videoChangeUrl('+i+')"  style="width: '+(window.innerWidth-50)+'px;" class="truncate">'+fileInfo.name+"-"+fileInfo.path+'</a></li>'; 
					 t='<li><button type="button" class="btn btn-info btn-rounded btn-xs" onclick="copyUrl('+i+')">复制</button><a href="javascript:videoChangeUrl('+i+')"  >'+fileInfo.name+'</a></li>'; 
					$("#div1").append(t);   
				}
			}}); 
    </script>
  </body>
</html>
